import React, { useEffect, useState } from "react";
import { NavBar, Space, Toast } from 'antd-mobile'
import { Navigate, useNavigate } from 'react-router-dom'
import './activity.css'
import { Image } from 'antd-mobile'
import axios from "axios";
export default function Activity() {
    const [activity, setActivity] = useState([])
    const navigate = useNavigate()
    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
        navigate(-1)
    }

    const getActivity = async () => {
        let res = await axios.get(`http://localhost:3000/ycf/activity`)
        if (res.data.code == 200) {
            setActivity(res.data.data)
        }
    }

    useEffect(() => {
        getActivity()
    }, [])

    return (
        <div className="activity-box">
            <div className="activity-title">
                <NavBar onBack={back}>活动专区</NavBar>
            </div>
            <div className="activity-content">
                {
                    activity.map((item) => {
                        return <div className="activity-a" key={item._id}>
                                <img className='activity-img' src={item.activity_img} alt="" />
                            <div>
                                <h3>{item.title}</h3>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}